window.addEventListener("load", function () {

    // banner轮播图
    new Swiper('.swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        autoplay: true,

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    })

    //渲染
    function serveDom() {
        let arr = [
            {
                imgUrl: './img/service01.svg',
                tittle: 'API私有化服务',
                desc: '可部署本地&专有云的Web API',
                a: '去搜索'
            },

            {
                imgUrl: './img/service02.svg',
                tittle: '源码云监测',
                desc: '实时代码托管、威胁情报监控',
                a: '去搜索'
            },

            {
                imgUrl: './img/service03.svg',
                tittle: '源码有赢',
                desc: '一站式营销活动服务平台',
                a: '去搜索'
            },

            {
                imgUrl: './img/service04.svg',
                tittle: 'YuanMa API',
                desc: 'API开发者协作平台',
                a: '去搜索'
            }
        ];

        let sHtml = "";//这里如果不给值就会使undefined

        arr.forEach(function (v) {

            // console.log(v.tittle);

            sHtml += `<li class="mr20">
                    <img src=${v.imgUrl}>
                    <h4 class="f24 mt5 ml20">${v.tittle}</h4>
                    <p class="f12 mt12 ml20">${v.desc}</p>
                    <a class="f12 mt26 ml20" href="#">${v.a}</a>
            </li>`;

            // console.log(sHtml);

        })

        serveList.innerHTML = sHtml;
    }

    serveDom();

    // classify里的动态渲染
    function classifyDom() {

        // 保存数据
        let arr = [
            {
                imgUrl: './img/api01.svg',
                desc: '生活服务'
            },

            {
                imgUrl: './img/api02.svg',
                desc: '金融科技'
            },

            {
                imgUrl: './img/api03.svg',
                desc: '交通地理'
            },

            {
                imgUrl: './img/api04.svg',
                desc: '充值缴费'
            },

            {
                imgUrl: './img/api05.svg',
                desc: '数据智能'
            },

            {
                imgUrl: './img/api06.svg',
                desc: '企业工商'
            },

            {
                imgUrl: './img/api07.svg',
                desc: '应用开发'
            },

            {
                imgUrl: './img/api08.svg',
                desc: '电子商务'
            },

            {
                imgUrl: './img/apic1.svg',
                desc: '吃喝玩乐'
            },

            {
                imgUrl: './img/apic2.svg',
                desc: '文娱视频'
            }
        ];

        // 设置变量
        let htmlDom = '';

        // 遍历数组
        arr.forEach(function (v) {

            // console.log(v.desc);

            htmlDom += `
                <li class="rel">
                    <div class="abs">
                        <img src=${v.imgUrl} alt="">
                        <p class="mt5">${v.desc}</p>
                    </div>
                </li>
            `;

            classifyList.innerHTML = htmlDom;

        })

    }

    classifyDom();

    // classify的动态设置

    function classifyListHover() {

        let classifyListDom = getEleAll("#classifyList li div");

        let oldImgUrl = '';

        let newImgUrl = '';

        let imgUrl = "";

        // console.log(classifyListDom);

        for (let i = 0; i < classifyListDom.length; i++) {
            // console.log(classifyListDom[i]);

            classifyListDom[i].parentNode.addEventListener("mouseover", function () {

                this.style = `
                color:#fff;
                background-color:#2f7ee9;
                `;

                // 保存老的图片地址
                imgUrl = classifyListDom[i].firstElementChild.src;

                oldImgUrl = imgUrl;

                // classifyListDom[i].firstElementChild;
                // console.log(classifyListDom[i].firstElementChild.src);

                let index = imgUrl.lastIndexOf("/");

                // console.log(index);

                newImgUrl = imgUrl.substring(index + 1);

                classifyListDom[i].firstElementChild.src = `./img/${newImgUrl.split('.')[0]}-c.svg`;

                console.log(newImgUrl);
                console.log(newImgUrl.split('.')[0]);

            })

            classifyListDom[i].parentNode.addEventListener("mouseout", function () {

                this.style = ``;

                classifyListDom[i].firstElementChild.src = oldImgUrl;

            })

        }

    }

    classifyListHover();


    // company动态设置
    function company_auto() {

        let companyDom = getEleAll("#company .content");

        let index = 0;

        console.log(companyDom[index]);

        companyDom[index].style.display = 'block';

        window.setInterval(function () {
            // console.log(index);
            // console.log(companyDom[index]);
            
            companyDom[index].style.display="none";
            
            index++;

            console.log(index);
            
            if (index == companyDom.length) {
                index = 0;
            }

            companyDom[index].style.display="block";
            
        }, 3000)

    }

    company_auto();


    function safeListDom() {

        // let safeListDom = getEleAll("#safeList li");

        let sHTML = '';

        // console.log(safeListDom);

        let arr = [
            {
                imgval: './img/security-logo-item01.svg',
                words: '高新技术企业'
            },

            {
                imgval: './img/security-logo-item02.svg',
                words: 'CMMI3'
            },

            {
                imgval: './img/security-logo-item03.png',
                words: 'ISO9001'
            },

            {
                imgval: './img/security-logo-item04.png',
                words: 'ISO20000'
            },

            {
                imgval: './img/security-logo-item05.png',
                words: 'ISO27001'
            },
            {
                imgval: './img/security-logo-item06.png',
                words: '网络安全三级等保'
            }

        ];

        arr.forEach(function (v) {

            // console.log(v.imgval);

            sHTML += `
                <li>
                <img src=${v.imgval}>
                <p class="mt20">${v.words}</p>
                </li>
            `;

        })


        safeList.innerHTML = sHTML;

    }

    safeListDom()

    // 返回顶部
    let toTopBtn = getEle("#toTop");

    let timeId = null;

    // console.log(toTopBtn);
    
    window.addEventListener("scroll",function(){

        // console.log(scrollVal);

        let scrollVal = document.documentElement.scrollTop;


        if(scrollVal >= 200){
            toTopBtn.style.dispaly='block';
        }else{
            toTopBtn.style.dispaly='none';
        }

    })

    toTop.addEventListener('click',function(){ 

        window.clearTimeout(timeId);

        timeId = window.setInterval(function(){

            let scrollVal = document.documentElement.scrollTop;

            document.documentElement.scrollTop = scrollVal - 20;

            // console.log(scrollVal);

            if(scrollVal <= 0){
                window.clearTimeout(timeId);
            }

        },10)

    })
})
